<template>
  <div class="user_list-page flexC">
    <Tabs name="name1">

      <!--      用例界面-->
      <TabPane label="测试用例" tab="name1">
        <div class="user_list-page ">

          <!--          用例查询-->
          <div class="user_list-page" style="margin-bottom: 20px;">
            <div class="pageHead" style="padding-bottom: 15px;">
              <span>用例查询</span>
              <div style="display: inline-block;justify-content: space-between;float:right">
                <Button @click="testcasequery" type="primary" icon="ios-search" size='small'
                        style="margin-right: 10px;">查询
                </Button>
                <Button @click="testcasereset('searchForm')" size='small'>重置</Button>
              </div>
            </div>
            <div class="pageHead">
              <Form ref="searchForm" :model="testqueryForm" inline :label-width="80">
                <FormItem label="所属项目" prop="project">
                  <Select v-model="testqueryForm.project" style="width:200px" clearable>
                    <Option v-for="(item, index) in projectnames" :value="item.id" :key="item.id">{{
                        item.name
                      }}
                    </Option>
                  </Select>
                </FormItem>

                <FormItem label="所属场景" prop="project">
                  <Select v-model="testqueryForm.testsuite" style="width:200px" clearable>
                    <Option v-for="(item, index) in Belongstesuite" :value="item.id" :key="item.id">{{
                        item.name
                      }}
                    </Option>
                  </Select>
                </FormItem>

                <FormItem label="请求接口" prop="project">
                  <Select v-model="testqueryForm.api" style="width:200px" clearable>
                    <Option v-for="(item, index) in Belongsapi" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>

                <FormItem label="用例名称" prop="name">
                  <Input
                      type="text"
                      v-model="testqueryForm.name"
                      placeholder="请输入接口名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>

                <FormItem label="用例状态" prop="project">
                  <Select v-model="testqueryForm.status" style="width:200px" clearable>
                    <!--                    <Option v-for="(item, key) in statuslist" :value="item.id" :key="key">{{ item.name }}</Option>-->
                    <Option :value="0">初始状态</Option>
                    <Option :value="1">通过</Option>
                    <Option :value="2">失败</Option>
                  </Select>
                </FormItem>

                <FormItem label="重要级别" prop="project">
                  <Select v-model="testqueryForm.level" style="width:200px" clearable>
                    <!--                    <Option v-for="(item, key) in levellist" :value="item.id" :key="key">{{ item.name }}</Option>-->
                    <Option :value="0">低</Option>
                    <Option :value="1">中</Option>
                    <Option :value="2">高</Option>
                    <Option :value="3">更高</Option>
                  </Select>
                </FormItem>
              </Form>
            </div>
          </div>

          <!--          用例列表展示-->
          <div class="pageHead">
            <div style="display: flex;justify-content: space-between">
              <p>用例列表</p>
              <div>
                <Icon type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                <i style="margin-right: 15px;">初始状态</i>
                <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                <i style="margin-right: 15px;">通过</i>
                <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                <i style="margin-right: 15px;">失败</i>
                <Button type="primary" size="small" @click="cremodel=true">创建用例</Button>
                <Button type="primary" size="small" @click="Batch" style="margin-left: 10px;">批量执行</Button>
                <Button type="error" size="small" style="margin-left: 10px;" @click="deletetaescase">删除</Button>


                <Modal title="删除用例" v-model="deletestcase">
                  部分用例已关联测试场景，请选择删除方式
                  <div slot="footer">
                    <Button type="warning" size="default" @click="detestcasefalse">只删除未关联场景用例</Button>
                    <Button type="error" size="default" @click="detestcasetrue">删除选择用例并解除关联</Button>
                    <Button type="primary" size="default" @click="quitdeletetaescase">取消</Button>
                  </div>
                </Modal>
              </div>
            </div>

            <!--            用例创建model-->
            <Modal v-model="cremodel" fullscreen title="创建用例">
              <Tabs name="name2">
                <TabPane label="基础信息" tab="name2">
                  <Form ref="InsterModal" :model="InsterModal" :rules="ruleValiinter">
                    <div>
                      <FormItem label="用例名称" prop="name" style="margin-left: 20px;">
                        <Input
                            type="text"
                            v-model="InsterModal.name"
                            clearable
                            style="width: 1750px;"
                        />
                      </FormItem>
                    </div>

                    <FormItem label="所属项目" style="margin-left: 30px;">
                      <Select v-model="InsterModal.project" clearable style="width:1750px">
                        <Option v-for="item in prolist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>

                    <FormItem label="关联接口" prop="interface" style="margin-left: 20px;">
                      <Select v-model="InsterModal.interface" clearable style="width:1750px"
                              @on-change="reproject(InsterModal.interface, interlist)">
                        <Option v-for="item in interlist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>


                    <FormItem label="请求URL" prop="url" style="margin-left: 20px">
                      <Input style="width: 1750px" v-model="InsterModal.url">
                      </Input>
                    </FormItem>


                    <FormItem label="备注" style="margin-left: 58px;">
                      <Input
                          type="textarea"
                          v-model="InsterModal.desc"
                          :rows=10
                          style="width: 1750px"
                      />
                    </FormItem>
                  </Form>


                </TabPane>
                <TabPane label="Headers参数" tab="name2">
                  <template>
                    <vue-json-editor
                        style="height: 740px"
                        v-model="headersmodle"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"
                    />
                  </template>
                </TabPane>
                <TabPane label="Body参数" tab="name2">
                  <template>
                    <label style="padding-right: 20px;">参数类型</label>
                    <RadioGroup v-model="method">
                      <Radio label="Json"></Radio>
                      <Radio label="Data"></Radio>
                      <Radio label="Params"></Radio>
                    </RadioGroup>

                    <vue-json-editor
                        style="height: 700px;margin-top: 20px;"
                        v-model="bodymodle"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"
                    />
                  </template>
                </TabPane>
                <TabPane label="用例期望结果" tab="name2">
                  <template>
                    <vue-json-editor
                        style="height: 740px"
                        v-model="exmodle"
                        :showBtns="false"
                        :mode="'code'"
                        lang="zh"
                    />
                  </template>
                </TabPane>
              </Tabs>
              <div slot="footer">
                <Button @click="cremodel = false">取消</Button>
                <Button @click="createst('InsterModal')" type="primary">确定</Button>
              </div>
            </Modal>
          </div>

          <!--          用例列表-->
          <div class="pageHead">
            <!--            用例列表渲染-->
            <Table
                border
                @on-selection-change="selectFun"
                :columns="columns"
                :data="data"
                sortable="custom"
                ref="selectiontestcaselist"
                size="small"
            >
              <template slot-scope="{ row }" slot="project|interface">
                <strong>{{ row.api.project.name }} - {{ row.api.name }}</strong>
              </template>

              <template slot-scope="{ row }" slot="status">
                <Icon v-if="row.status == 'INITIAL'" type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                <Icon v-if="row.status == 'PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                <Icon v-if="row.status == 'FAIL'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
              </template>

              <template slot-scope="{ row }" slot="level">
                <Select v-model="row.level" style="width:80px" prefix="ios-home" @on-change="partials(row)"
                        transfer>
                  <div slot="prefix" class="box"
                       :style="{'background-color':row.level === 'LOW' ? '#2db7f5':row.level === 'NORMAL' ? '#19be6b' :row.level==='HIGH' ? '#f90' :'#ed4014' }"></div>
                  <Option v-for="item in cityList" :value="item.value" :key="item.name">
                    {{ item.name }}
                  </Option>
                </Select>
              </template>

            </Table>
            <div>
              <Page
                  :total="testcasepage.total"
                  :page-size="testcasepage.size"
                  :current="testcasepage.index"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="testcasepageSize"
                  @on-page-size-change="testcasepagePage"
                  style="margin-top: 20px;"

              />
            </div>
          </div>
        </div>
      </TabPane>


      <!--      场景界面-->
      <TabPane label="测试场景" tab="name1">
        <div class="user_list-page ">
          <div class="user_list-page" style="margin-bottom: 20px;">
            <div class="pageHead">
              <p>场景查询</p>
            </div>
            <div class="pageHead">
              <Form ref="testsuiteForm" :model="testsuiteForm" inline :label-width="80">
                <FormItem label="所属项目" prop="project">
                  <Select v-model="testsuiteForm.project" style="width:200px" clearable>
                    <Option v-for="(item, index) in projectnames" :value="item.id" :key="item.id">{{
                        item.name
                      }}
                    </Option>
                  </Select>
                </FormItem>


                <FormItem label="场景名称" prop="name">
                  <Input
                      type="text"
                      v-model="testsuiteForm.name"
                      placeholder="请输入接口名称"
                      clearable
                      style="width: 200px"
                  />
                </FormItem>

                <FormItem label="重要级别" prop="level">
                  <Select v-model="testsuiteForm.level" style="width:200px" clearable>
                    <!--                    <Option v-for="(item, index) in projectnames" :value="item.id" :key="item.id">{{ item.name }}</Option>-->
                    <Option :value="0">低</Option>
                    <Option :value="1">中</Option>
                    <Option :value="2">高</Option>
                    <Option :value="3">更高</Option>
                  </Select>
                </FormItem>

                <FormItem style="margin-left: -35px" class="br">
                  <Button @click="testsuitequery" type="primary" icon="ios-search" style="
                   margin-right: 10px;"
                  >搜索
                  </Button>
                  <Button @click="testsuitereset('searchForm')">重置</Button>
                </FormItem>
              </Form>
            </div>
          </div>

          <div class="pageHead">
            <div style="display: flex;justify-content: space-between">
              <p>场景列表</p>
              <div>
                <Icon type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                <i style="margin-right: 15px;">初始状态</i>
                <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                <i style="margin-right: 15px;">全部通过</i>
                <Icon type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
                <i style="margin-right: 15px;">部分通过</i>
                <Icon type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                <i style="margin-right: 15px;">失败</i>
                <Button type="primary" size="small" @click="cretesttuite=true">创建场景</Button>
                <Button type="primary" size="small" @click="testsuiteBatch" style="margin-left: 10px;">批量执行</Button>
                <Button type="error" size="small" style="margin-left: 10px;" @click="testsuitede">删除</Button>
                <Modal title="删除场景" v-model="deletestsuite">
                  请选择所选场景的删除方式！
                  <div slot="footer">
                    <Button type="warning" size="default" @click="detestsuite(false)">临时删除所选场景</Button>
                    <Button type="error" size="default" @click="detestsuite(true)">永久删除所选场景</Button>
                    <Button type="primary" size="default" @click="deletestsuite=false">取消</Button>
                  </div>
                </Modal>
              </div>


              <!--              创建场景-->
              <Modal v-model="cretesttuite" width="950" title="创建场景">
                <Form ref="crenvs" :model="crtestsuite" :rules="ruleValidate">
                  <div>
                    <FormItem label="场景名称" prop="name">
                      <Input
                          type="text"
                          v-model="crtestsuite.name"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="所属项目" prop="project">
                      <Select v-model="crtestsuite.project" style="width:800px">
                        <Option v-for="(item, index) in prolist" :value="item.id" :key="item.id">{{
                            item.name
                          }}
                        </Option>
                      </Select>
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="备注" style="margin-left: 38px;">
                      <Input
                          type="textarea"
                          v-model="crtestsuite.desc"
                          :rows=5
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>
                </Form>


                <div slot="footer">
                  <Button @click="cretesttuite = false">取消</Button>
                  <Button @click="cretestsuite('InsterModal')" type="primary">确定</Button>
                </div>
              </Modal>

              <!--              编辑场景-->
              <Modal v-model="updatetesttuite" width="950" title="编辑场景">
                <Form ref="crenvs" :model="crtestsuite2" :rules="ruleValidate">
                  <div>
                    <FormItem label="场景名称" prop="name">
                      <Input
                          type="text"
                          v-model="crtestsuite2.name"
                          clearable
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="所属项目" prop="project">
                      <Select v-model="crtestsuite2.project" style="width:800px">
                        <Option v-for="(item, index) in prolist" :value="item.id" :key="index">{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                  </div>

                  <div>
                    <FormItem label="备注" style="margin-left: 38px;">
                      <Input
                          type="textarea"
                          v-model="crtestsuite2.desc"
                          :rows=5
                          style="width: 800px"
                      />
                    </FormItem>
                  </div>
                </Form>


                <div slot="footer">
                  <Button @click="updatetesttuite = false">取消</Button>
                  <Button @click="createst('InsterModal')" type="primary">确定</Button>
                </div>
              </Modal>

              <!--              编辑|调试用例-->
              <Modal v-model="debug" fullscreen title="编辑|调试用例">
                <Tabs name="name2" v-model:value=testcaseset>
                  <TabPane label="基础信息" name="basics" tab="name2">
                    <Form ref="testcasesModal" :model="testcasesModal" :rules="ruleValiinter">
                      <div>
                        <FormItem label="运行环境(调试专用)" prop="envs">
                          <Select v-model="testcasesModal.envs" clearable style="width:1700px">
                            <Option v-for="item in envslist" :value="item.id" :key="item.id">{{ item.name }}</Option>
                          </Select>
                        </FormItem>
                      </div>

                      <div>
                        <FormItem label="用例名称" prop="name" style="margin-left: 53px;">
                          <Input
                              type="text"
                              v-model="testcasesModal.name"
                              clearable
                              style="width: 1700px;"
                          />
                        </FormItem>
                      </div>

                      <FormItem label="关联接口" prop="interface" style="margin-left: 53px;">
                        <Select v-model="testcasesModal.interface" clearable style="width:1700px">
                          <Option v-for="item in interlist2" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                      </FormItem>


                      <FormItem label="请求URL" prop="url" style="margin-left: 53px">
                        <Input style="width: 1700px" v-model="testcasesModal.url">
                        </Input>
                      </FormItem>


                      <FormItem label="备注" style="margin-left: 90px;">
                        <Input
                            type="textarea"
                            v-model="testcasesModal.desc"
                            :rows=10
                            style="width: 1700px"
                        />
                      </FormItem>
                    </Form>


                  </TabPane>
                  <TabPane label="Headers参数" name="header" tab="name2">
                    <template>
                      <vue-json-editor
                          style="height: 740px"
                          v-model="headersmodle2"
                          :showBtns="false"
                          :mode="'code'"
                          lang="zh"
                      />
                    </template>
                  </TabPane>
                  <TabPane label="Body参数" name="body" tab="name2">
                    <template>
                      <label style="padding-right: 20px;">参数类型</label>
                      <RadioGroup v-model="method2">
                        <Radio label="Json"></Radio>
                        <Radio label="Form Data"></Radio>
                        <Radio label="Params"></Radio>
                      </RadioGroup>

                      <vue-json-editor
                          style="height: 700px;margin-top: 20px;"
                          v-model="bodymodle2"
                          :showBtns="false"
                          :mode="'code'"
                          lang="zh"
                      />
                    </template>
                  </TabPane>
                  <TabPane label="期望结果" name="end" tab="name2">
                    <template>
                      <vue-json-editor
                          style="height: 740px"
                          v-model="exmodle2"
                          :showBtns="false"
                          :mode="'code'"
                          lang="zh"
                      />
                    </template>
                  </TabPane>
                  <TabPane label="用例调试" tab="name2" name="exp">
                    <div>
                      <label style="margin-left: 40px;margin-right: 10px;">执行时间</label>
                      <template>
                        <Input v-model="resultsModal.execute" icon="ios-calendar-outline" readonly
                               style="width: 200px"></Input>
                      </template>

                      <label style="margin-left: 40px;margin-right: 10px;">响应时长(ms)</label>
                      <template>
                        <Input v-model="resultsModal.elapsed" readonly
                               style="width: 200px"></Input>
                      </template>

                      <label style="margin-left: 40px;margin-right: 10px;">响应状态码</label>
                      <template>
                        <Input v-model="resultsModal.actual" readonly
                               style="width: 200px"></Input>
                      </template>

                      <label style="margin-left: 40px;margin-right: 10px;">调试结果</label>
                      <template>
                        <Input :value="resultsModal.status == 'PASS' ? '通过':'失败' " readonly
                               :class="resultsModal.status === 'PASS' ? 'inputSuccess': 'inputFail' "
                               style="width: 200px"></Input>
                      </template>
                    </div>

                    <Divider/>
                    <div style="display:flex;margin-top: 10px;margin-left: 40px;">
                      <div style="width:750px;margin-right: 44px;">
                        <span>响应结果</span>
                        <vue-json-editor
                            style="height: 650px;margin-top: 5px;"
                            v-model="response_value"
                            :showBtns="false"
                            :mode="'code'"
                            lang="zh"
                        />
                      </div>

                      <div style="width:750px;margin-right: 44px;margin-left: 50px;">
                        <span>已提取参数</span>
                        <vue-json-editor
                            style="height: 650px;width: 740px;margin-top: 5px;"
                            v-model="extract_value"
                            :showBtns="false"
                            :mode="'code'"
                            lang="zh"
                        />
                      </div>
                    </div>
                  </TabPane>
                </Tabs>
                <div slot="footer">
                  <Button @click="debug = false">取消</Button>
                  <Button @click="updatatest('testcasesModal')" type="primary">更新用例</Button>
                  <Button @click="debugtest('testcasesModal')">调试用例</Button>
                  <Button @click="createst3('testcasesModal')" type="primary">保存用例结果</Button>
                </div>
              </Modal>

              <!--              组织场景-->
              <Modal v-model="creatsuite" fullscreen title="项目：">

                <!--                用例源-->
                <div style="border: 1px solid #dcdee2;">
                  <div class="testcase" style="padding-bottom: 16px">
                    <span>用例源</span>
                    <div style="display: inline-block;justify-content: space-between;float:right">
                      <Button @click="testsourcesearch" type="primary" icon="ios-search" size='small'
                              style="margin-right: 10px;">搜索
                      </Button>
                      <Button @click="testsourcereset" size='small'>重置</Button>
                    </div>
                  </div>
                </div>
                <div style="border: 1px solid #dcdee2;">
                  <div style="margin-top: 15px;">
                    <Form ref="searchForm" :model="sourceForm" inline :label-width="120">
                      <FormItem label="接口所属模块" prop="project">
                        <Select v-model="sourceForm.module" style="width:440px" clearable>
                          <Option v-for="(item, index) in moduleslist" :value="item.id" :key="item.id">{{
                              item.name
                            }}
                          </Option>
                        </Select>
                      </FormItem>


                      <FormItem label="请求接口" prop="name">
                        <Input
                            type="text"
                            v-model="sourceForm.api"
                            placeholder="请输入接口名称"
                            clearable
                            style="width: 300px"
                        />
                      </FormItem>

                      <FormItem label="用例名称" prop="project">
                        <Input
                            type="text"
                            v-model="sourceForm.name"
                            placeholder="请输入用例名称"
                            clearable
                            style="width: 300px"
                        />
                      </FormItem>

                      <FormItem label="重要级别" prop="project">
                        <Select v-model="sourceForm.level" style="width:300px" clearable>
                          <Option :value="0">低</Option>
                          <Option :value="1">中</Option>
                          <Option :value="2">高</Option>
                          <Option :value="3">更高</Option>
                        </Select>
                      </FormItem>
                    </Form>
                  </div>
                  <Table
                      border
                      :columns="creatsuiteumns"
                      :data="testcasedata"
                      sortable="custom"
                      ref="table"
                      size="small"
                      style="clear:both;width: 1836px;margin-left: 15px;"
                  >
                    <template slot-scope="{ row }" slot="os">
                      <Button style="color: #2d8cf0" @click="addtestcase(row)" ghost>选择</Button>
                    </template>

                    <template slot-scope="{ row }" slot="interface">
                      <strong>{{ row.api.name }}</strong>
                    </template>

                    <template slot-scope="{ row }" slot="status">
                      <Icon v-if="row.status == 'INITIAL'" type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                      <Icon v-if="row.status == 'PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                      <Icon v-if="row.status == 'FAIl'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                    </template>

                    <template slot-scope="{ row }" slot="level">
                      <Select v-model="row.level" style="width:80px" prefix="ios-home" @on-change="partials(row)"
                              transfer>
                        <div slot="prefix" class="box"
                             :style="{'background-color':row.level === 'LOW' ? '#2db7f5':row.level === 'NORMAL' ? '#19be6b' :row.level==='HIGH' ? '#f90' :'#ed4014' }"></div>
                        <Option v-for="item in cityList" :value="item.value" :key="item.name">
                          {{ item.name }}
                        </Option>
                      </Select>
                    </template>

                  </Table>
                  <div style="margin-bottom: 15px;">
                    <Page
                        :total="testcasepage.total"
                        :page-size="testcasepage.size"
                        :current="testcasepage.index"
                        show-total
                        show-elevator
                        show-sizer
                        @on-change="testcasesourcepageSize"
                        @on-page-size-change="testcasesourcepagePage"
                        style="margin-top: 20px;padding-left: 16px;"

                    />
                  </div>
                </div>

                <!--                组织用例-->
                <div style="border: 1px solid #dcdee2;margin-top: 15px">
                  <div class="testcase" style="padding-bottom: 16px">
                    <span>组织用例 (拖动调整顺序)</span>
                    <div style="display: inline-block;justify-content: space-between;float:right">
                      <span style="margin-right: 5px;">从已有场景添加用例:</span>

                      <Select v-model="organizationtestcase" style="width:200px;margin-right: 10px;">
                        <Option v-for="item in organizationlist" :value="item.id" :key="item.id">{{
                            item.name
                          }}
                        </Option>
                      </Select>

                      <Button @click="organizationadd" type="primary" icon="ios-search" size='small'
                              style="margin-right: 10px;">添加
                      </Button>

                      <Button @click="crmethod" type="primary" icon="ios-search" size='small'
                              style="margin-right: 10px;">添加扩展方法
                      </Button>
                      <!--                      <Button @click="handleReset('searchForm')" size='small'>重置</Button>-->
                    </div>
                  </div>
                </div>

                <div style="border: 1px solid #dcdee2;padding-top: 20px;padding-bottom: 20px;">
                  <Table
                      :span-method="handleSpan"
                      border
                      draggable
                      @on-drag-drop="onDragDrop"
                      @on-selection-change="selectFun"
                      :columns="testcasesort"
                      :data="organizationtest"
                      sortable="custom"
                      ref="selection"
                      size="small"
                      style="clear:both;width: 1836px;margin-left: 15px;"
                  >
                    <template slot-scope="{ row }" slot="testcase_name">
                      <div v-if="row.type === 'EXT_METHOD'">
                        <Input @on-change="testcase_name_change(row._index, row.ext_method_name)" v-model="row.ext_method_name" style="width: 260px"/>
                      </div>
                      <div v-else>
                        <Input @input="inputchange(row)" v-model="row.testcase_name" style="width: 260px"/>
                      </div>
                    </template>


                    <template slot-scope="{ row }" slot="frequency">
                      <InputNumber v-model="row.loop_count" readonly></InputNumber>
                    </template>

                    <template slot-scope="{ row }" slot="interface">
                       <div v-if="row.type === 'EXT_METHOD'">
                        <Input v-model="row.ext_method" placeholder="请输入方法名称" style="width: 1180px" @on-change="ext_method_change(row._index,row.ext_method)" />
                       </div>
                      <div v-else>
                        <strong v-if="row.testcase.api">{{ row.testcase.api.name }}</strong>
                        <strong v-else>{{ row.api.name }}</strong>

<!--                        <strong v-if="row.api">{{ row.api.name }}</strong>-->
<!--                        <strong v-else>{{ row.testcase.api.name }}</strong>-->
                      </div>
                    </template>

                    <template slot-scope="{ row }" slot="action">
                      <i-switch size="large" v-model="row.is_execute" @on-change="change(row)">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                      </i-switch>
                      <Button type="text" ghost style="color: #f5222d" @click="deletetestcase(row)">移除</Button>
                    </template>

                  </Table>
                </div>

                <div slot="footer">
                  <Button @click="creatsuite = false">取消</Button>
                  <Button @click="organization" type="primary">确定</Button>
                </div>
              </Modal>


            </div>
          </div>

          <div class="pageHead">
            <!--           场景列表渲染-->
            <Table
                border
                @on-selection-change="testsuiteselectFun"
                :columns="scenariocolumns"
                :data="scenariodata"
                sortable="custom"
                ref="table"
                size="small"
            >
              <template slot-scope="{ row }" slot="project">
                <strong>{{ row.project.name }}</strong>
              </template>

              <template slot-scope="{ row }" slot="testcases">
                <!--                <strong>{{ row.testcases.name }}</strong>-->
                <samp v-for="(item ,index) in listSplice(row.testcases)">
                     <Tag color="green" >{{ item.name }}</Tag>
                </samp>
              </template>

              <template slot-scope="{ row }" slot="status">
                <Icon v-if="row.status == 'INITIAL'" type="ios-leaf" size="24" color="rgb(45, 183, 245)"/>
                <Icon v-if="row.status == 'PASS'" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                <Icon v-if="row.status == 'FAIL'" type="ios-leaf" size="24" color="rgb(237, 64, 20)"/>
                <Icon v-if="row.status == 'PARTIAL_PASS'" type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
              </template>

              <template slot-scope="{ row }" slot="level">
                <Select v-model="row.level" style="width:80px" prefix="ios-home" @on-change="testsuitepartials(row)"
                        transfer>
                  <div slot="prefix" class="box"
                       :style="{'background-color':row.level === 'LOW' ? '#2db7f5':row.level === 'NORMAL' ? '#19be6b' :row.level==='HIGH' ? '#f90' :'#ed4014' }"></div>
                  <Option v-for="item in cityList" :value="item.value" :key="item.name">
                    {{ item.name }}
                  </Option>
                </Select>
              </template>

            </Table>
            <div>
              <Page
                  :total="testcasepage.total"
                  :page-size="testcasepage.size"
                  :current="testcasepage.index"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="testcasepageSize"
                  @on-page-size-change="testcasepagePage"
                  style="margin-top: 20px;"

              />
            </div>
          </div>
        </div>
      </TabPane>


      <TabPane label="测试场景集" tab="name1">
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import {
  testcaselist,
  projectlist,
  apilist,
  createstcase,
  envlist,
  testdebug,
  uptest,
  partial,
  testcase_Batch,
  testsuitelist,
  crtestsuite,
  testsuite2testcase,
  gettestsuite2testcase,
  testsuite_Batch,
  testsuite_partial,
  testcase_Batch_Delete,
  testsuitedelete,
  modulelist,
  suiteprojectscreen
} from '../../api/api'
import vueJsonEditor from "vue-json-editor";

export default {
  name: "testcase",
  components: {vueJsonEditor},
  data() {
    return {
      suite_testcase:[], //场景下用例
      organizationtestcase: '',// 从已有场景添加
      organizationlist: [],
      moduleslist: [],
      sourceForm: {
        module: '',
        api: '',
        name: '',
        level: ''

      },
      testsuiteForm: {
        project: '',
        name: '',
        level: null
      },
      Belongsapi: [],
      Belongstesuite: [],
      testqueryForm: {
        project: '',
        testsuite: '',
        api: '',
        name: '',
        status: null,
        level: null
      },
      deletestcase: false,
      deletestsuite: false,
      projectnames: [],
      testsuite_id: "",
      testsuite_name: "",
      testcasedata: [],
      creatsuite: false,
      crtestsuite: {
        name: '',
        project: '',
        desc: ''
      },
      crtestsuite2: {
        name: '',
        project: '',
        desc: ''
      },
      levelmodel: '',
      cityList: [{
        name: '低',
        value: 'LOW'
      },
        {
          name: '中',
          value: 'NORMAL'
        },
        {
          name: '高',
          value: 'HIGH'
        },
        {
          name: '更高',
          value: 'HIGHER'
        }
      ],
      ruleValidate: {
        name: [
          {required: true, message: '请输入场景名称', trigger: 'blur'}
        ],
        project: [
          {required: true, message: '请选择所属项目', trigger: 'blur'},
        ]
      },
      testcasepage: {
        index: 1,
        size: 10,
        total: 50
      },
      testcasesourcepage: {
        index: 1,
        size: 10,
        total: 50
      },
      MultilineId: [],
      testsuiteMultilineId: [],
      testcaseID: '',
      testcaseset: 'basics',
      response_value: {},
      extract_value: {},
      debug: false,
      exmodle: {
        "output": [],
        "validate": [
          {
            "check": "$.results.code",
            "expect": 200,
            "comparator": "eq"
          }
        ]
      },
      exmodle2: {
        "output": [],
        "validate": [
          {
            "check": "$.results.code",
            "expect": 200,
            "comparator": "eq"
          }
        ]
      },
      method: "Json",
      method2: "Json",
      bodymodle: {},
      bodymodle2: {},
      headersmodle: {
        "Content-Type": "application/json"
      },
      headersmodle2: {
        "Content-Type": "application/json"
      },
      prolist: [],
      interlist: [],
      interlist2: [],
      envslist: [],
      InsterModal: {
        name: '',
        project: '',
        interface: '',
        url: '',
        desc: ''
      },
      testcasesModal: {
        envs: '',
        name: '',
        project: '',
        interface: '',
        url: '',
        desc: ''
      },
      resultsModal: {
        execute: '',
        elapsed: '',
        actual: '',
        status: ''
      },
      cremodel: false,
      cretesttuite: false,
      updatetesttuite: false,
      searchForm: {},
      testcasecilp: false,
      data: [],
      scenariodata: [],
      organizationtest: [],
      ruleValiinter: {
        name: [
          {required: true, message: '请输入项目名称', trigger: 'blur'}
        ],
        interface: [
          {required: true, message: '请选择关联接口', trigger: 'blur'},
        ],
        url: [
          {required: true, message: '请输入请求地址', trigger: 'blur'},
        ],
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: "center",
        },
        {
          title: "用例名称",
          key: "name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "项目|接口",
          slot: "project|interface",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "请求URL",
          key: "url",
          align: "center",
          width: 230,
          minWidth: 120,
        },
        {
          title: "Headers参数",
          key: "headers",
          align: "center",
          width: 260,
          render: (h, params) => {
            let texts = params.row.headers
            if (params.row.headers != null) {
              if (params.row.headers.length > 30) {
                texts = params.row.headers.slice(0, 30) + '...' // 进行数字截取
              } else {
                texts = params.row.headers
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.headers)
              ])
            ])
          }
        },
        {
          title: "Body参数类型",
          key: "request_data_type",
          align: "center",
          width: 260,
        },
        {
          title: "Body参数",
          key: "request_data",
          align: "center",
          width: 260,
          render: (h, params) => {
            let texts = params.row.request_data
            if (params.row.request_data != null) {
              if (params.row.request_data.length > 50) {
                texts = params.row.request_data.slice(0, 50) + '...' // 进行数字截取
              } else {
                texts = params.row.request_data
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.request_data)
              ])
            ])
          }
        },
        {
          title: "期望结果",
          key: "expect_result",
          align: "center",
          width: 260,
          render: (h, params) => {
            let texts = params.row.expect_result
            if (params.row.expect_result != null) {
              if (params.row.expect_result.length > 50) {
                texts = params.row.expect_result.slice(0, 50) + '...' // 进行数字截取
              } else {
                texts = params.row.expect_result
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.expect_result)
              ])
            ])
          }
        },
        {
          title: "重要级别",
          slot: "level",
          align: "center",
          width: 120,
          fixed: "right",
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          width: 70,
          fixed: "right",

        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 190,
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit('crenvs2', params.row);
                      },
                    },
                  },
                  "复制"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                  "a",
                  {
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.enable(params.row);
                      },
                    },
                  },
                  "编辑"
              ),

              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                  "a",
                  {
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.enable(params.row);
                      },
                    },
                  },
                  "调试"
              )

            ])
                ;

          },
        },
      ],
      scenariocolumns: [
        {
          type: 'selection',
          width: 60,
          align: "center",
        },
        {
          title: "场景名称",
          key: "name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "所属项目",
          slot: "project",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "测试用例",
          slot: "testcases",
          align: "center",
          width: 529,
        },
        {
          title: "重要级别",
          slot: "level",
          align: "center",
          width: 120,
          fixed: "right",
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          width: 70,
          fixed: "right",

        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 190,
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                  "a",
                  {

                    on: {
                      click: () => {
                        this.edit('crenvs2', params.row);
                      },
                    },
                  },
                  "复制"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                  "a",
                  {
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.upsuite(params.row);
                      },
                    },
                  },
                  "编辑"
              ),

              enableOrDisable,
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                  "a",
                  {
                    style: {
                      color: '#2D8CF0'
                    },
                    on: {
                      click: () => {
                        this.cresuite(params.row);
                      },
                    },
                  },
                  "组织场景"
              )

            ])
                ;

          },
        },
      ],
      creatsuiteumns: [
        {
          title: "操作",
          slot: "os",
          align: "center",
          width: 80,
        },
        {
          title: "用例名称",
          key: "name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "接口",
          slot: "interface",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "请求URL",
          key: "url",
          align: "center",
          width: 300,
        },
        {
          title: "Headers参数",
          key: "headers",
          align: "center",
          width: 250,

        },
        {
          title: "Body参数类型",
          key: "request_data_type",
          align: "center",
          width: 120,
        },
        {
          title: "Body参数",
          key: "request_data",
          align: "center",
          width: 250,
          render: (h, params) => {
            let texts = params.row.request_data
            if (params.row.request_data != null) {
              if (params.row.request_data.length > 50) {
                texts = params.row.request_data.slice(0, 50) + '...' // 进行数字截取
              } else {
                texts = params.row.request_data
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.request_data)
              ])
            ])
          }
        },
        {
          title: "期望结果",
          key: "expect_result",
          align: "center",
          width: 300,
        },
        {
          title: "创建时间",
          key: "create_time",
          align: "center",
          width: 160,
        },
        {
          title: "更新时间",
          key: "update_time",
          align: "center",
          width: 160,
        },
        {
          title: "重要级别",
          slot: "level",
          align: "center",
          width: 120,
          fixed: "right",
        },
        {
          title: "状态",
          slot: "status",
          align: "center",
          width: 70,
          fixed: "right",

        },
      ],
      testcasesort: [
        {
          title: "用例名称",
          slot: "testcase_name",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "循环次数",
          slot: "frequency",
          align: "center",
          width: 120,
        },
        {
          title: "接口名称",
          slot: "interface",
          align: "center",
          minWidth: 125,
          width: 300,
        },
        {
          title: "请求URL",
          key: "url",
          align: "center",
          width: 300,
        },
        {
          title: "Headers参数",
          key: "headers",
          align: "center",
          width: 250,
        },
        {
          title: "Body参数类型",
          key: "request_data_type",
          align: "center",
          width: 120,
        },
        {
          title: "Body参数",
          key: "request_data",
          align: "center",
          width: 250,
          render: (h, params) => {
            let texts = params.row.request_data
            if (params.row.request_data != null) {
              if (params.row.request_data.length > 50) {
                texts = params.row.request_data.slice(0, 50) + '...' // 进行数字截取
              } else {
                texts = params.row.request_data
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                }
              }, [texts, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal'
                }
              }, params.row.request_data)
              ])
            ])
          }
        },
        {
          title: "期望结果",
          key: "expect_result",
          align: "center",
          width: 300,
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 190,
          fixed: "right",
          renderHeader: (h, params) => {
            return h(
                'div',
                {
                  style: {
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                  }
                },
                [
                  h('div', '操作'),

                  h('Button', {
                    props: {
                      type: "text",//类型
                      size: "small",//尺寸
                    },
                    style: {
                      color: '#ed4014',
                      marginLeft: '5px'
                    },
                    on: {
                      click: () => {
                        this.organizationtest = []
                      }
                    },
                  }, '清空')

                ])
          }
        },

      ],
    }
  },
  created() {
    this.getlist();
    this.getprolist();
    this.intlist();
    this.envsList();
    this.gettestsuite();
  },

  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      // row: 当前行
      // column: 当前列
      // rowIndex: 当前行索引
      // columnIndex: 当前列索引
      console.log(row)
      if(row.type == "EXT_METHOD") {
        // 判断当前是否是第二列
        if (columnIndex === 2 ) {
          // 满足第一道第五个
          return [1, 5]
        }else if (columnIndex > 2 && columnIndex < 7) {
          // 判断当前列大于第三列且小于第七行   删除
            return [0, 0];
        }
      }

    },
    crmethod() {
      this.organizationtest.push({
        "testcase_name":"",
        // "loop_count":1,
        "type":"EXT_METHOD",
        "expect_result":{"output": [],"validate": []},
        // "request_data": null,
        // "request_data_type": null,
        // "headers":null,
        // "api": null,
        // "url": null,

      })
    },

    listSplice(row) {
      if (row.length > 10) {
        // row.push({'name': '.....'})
        row = row.slice(0, 10)
        row.push({'name': '...'})
        return row
      }else {
        return row
      }
    },

    // 用例组织其他场景添加操作
    organizationadd() {
      gettestsuite2testcase({'testsuite': this.organizationtestcase}).then(res => {
        if (res.data.data.length != 0) {
          this.organizationtest = res.data.data
        }

      })
    },

    // 用例源搜索
    testsourcesearch() {
      let data = {
        module: this.sourceForm.module,
        api_name: this.sourceForm.api,
        name: this.sourceForm.name,
        level: this.sourceForm.level === 0 ? "LOW" : this.sourceForm.level === 1 ? "NORMAL" : this.sourceForm.level === 2 ? "HIGH" : this.sourceForm.level === 3 ? "HIGHER" : "",
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.testcasedata = data
      })
    },
    // 用例源重置
    testsourcereset() {
      testcaselist().then(res => {
        let data = res.data.data
        this.testcasedata = data
      })
    },

    // 删除场景
    detestsuite(pw) {
      if (pw === true) {
        let data = {
          "is_de": true,
          "testsuite_id": this.testsuiteMultilineId
        }
        testsuitedelete(data).then(res => {
          this.deletestsuite = false
          this.gettestsuite()
          this.$Message.success('删除场景成功！')
        })
      } else {
        let data = {
          "is_de": false,
          "testsuite_id": this.testsuiteMultilineId
        }
        testsuitedelete(data).then(res => {
          this.deletestsuite = false
          this.gettestsuite()
          this.$Message.success('临时删除场景成功！')
        })
      }
    },

    // 用例搜索查询
    testcasequery() {
      let data = {
        project: this.testqueryForm.project,
        testsuite: this.testqueryForm.testsuite,
        api: this.testqueryForm.api,
        name: this.testqueryForm.name,
        status: this.testqueryForm.status === 0 ? "INITIAL" : this.testqueryForm.status === 1 ? "PASS" : this.testqueryForm.status === 2 ? "FAIL" : "",
        level: this.testqueryForm.level === 0 ? "LOW" : this.testqueryForm.level === 1 ? "NORMAL" : this.testqueryForm.level === 2 ? "HIGH" : this.testqueryForm.level === 3 ? "HIGHER" : "",

      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.data = data
      })
    },
    // 用例搜索重置
    testcasereset() {
      this.getlist()
    },

    // 场景搜索
    testsuitequery() {
      let data = {
        project: this.testsuiteForm.project,
        name: this.testsuiteForm.name,
        level: this.testsuiteForm.level === 0 ? "LOW" : this.testsuiteForm.level === 1 ? "NORMAL" : this.testsuiteForm.level === 2 ? "HIGH" : this.testsuiteForm.level === 3 ? "HIGHER" : "",
      }
      testsuitelist(data).then(res => {
        let data = res.data.data
        this.scenariodata = data
      })
    },
    // 场景搜索重置
    testsuitereset() {
      this.gettestsuite()
    },

    deletetestcase(row) {
      console.log(row._index)
      this.organizationtest.splice(row._index, 1)
    },

    detestcasefalse() {
      // 删除未关联的用例
      let data = {
        'associated': false,
        'data': this.MultilineId
      }
      testcase_Batch_Delete(data).then(res => {
        this.$Message.success('成功删除用例！')
        this.deletestcase = false
        this.getlist()
      })
    },

    detestcasetrue() {
      // 删除已关联的用例，并解绑场景
      let data = {
        'associated': true,
        'data': this.MultilineId
      }
      testcase_Batch_Delete(data).then(res => {
        this.$Message.success('已解绑删除用例！')
        this.deletestcase = false
        this.getlist()
        this.gettestsuite()
      })
    },

    quitdeletetaescase() {
      this.deletestcase = false
      this.$refs.selectiontestcaselist.selectAll(false);
    },

    // 删除用例
    deletetaescase() {
      // console.log(JSON.stringify(this.MultilineId ) === '{}')
      console.log(this.MultilineId)
      if (this.MultilineId.length === 0) {
        this.$Message.error('请先选择需要删除的用例!')
      } else {
        this.deletestcase = true
      }
    },

    // 删除场景
    testsuitede() {
      if (this.testsuiteMultilineId.length === 0) {
        this.$Message.error('请先选择需要删除的场景!')
      } else {
        this.deletestsuite = true
      }
    },

    change(row) {
      debugger
      this.$set(this.organizationtest[row._index], 'is_execute', row.is_execute)
      console.log(row)
      console.log(this.organizationtest)
    },

    inputchange(row) {
      this.$set(this.organizationtest[row._index], 'testcase_name', row.testcase_name)
      console.log(row)
      console.log(this.organizationtest)
    },

    organization() {
      let datas = []
      for (let i=0; i<this.organizationtest.length; i++){
        if (this.organizationtest[i].type==='EXT_METHOD') {
           let dict = {
              "ext_method_name": this.organizationtest[i].ext_method_name,
              "ext_method": this.organizationtest[i].ext_method,
              "expect_result": 'EXT_METHOD',
              "is_execute": this.organizationtest[i].is_execute,
              "loop_count": 1,
              "sort": i,
              "testsuite_id": this.testsuite_id,
              "testsuite_name": this.testsuite_name,
              "type": 'EXT_METHOD'
            }
            datas.push(dict)
        }else{
          debugger
            let dict = {
            "testsuite_id": this.testsuite_id,
            "testcase_id": this.organizationtest[i].testcase_id,
            "type": 'HTTP_API',
            "sort": i,
            "is_execute": this.organizationtest[i].is_execute,
            "loop_count": 1,
            "testsuite_name": this.testsuite_name,
            "testcase_name": this.organizationtest[i].testcase_name,
            "url": this.organizationtest[i].url,
            "headers": this.organizationtest[i].headers,
            "request_data_type": this.organizationtest[i].request_data_type,
            "request_params": this.organizationtest[i].request_params,
            "request_data": this.organizationtest[i].request_data,
            "expect_result": this.organizationtest[i].expect_result,
          }
            datas.push(dict)
        }
      }


      let data = {
        'testsuite_id': this.testsuite_id,
        'data': datas
      }
      testsuite2testcase(data).then(res => {
        this.$Message.success('用例组织成功！')
        this.gettestsuite()
        this.creatsuite = false
      })
    },


    onDragDrop(first, end) {
      first = parseInt(first)
      end = parseInt(end)
      let tmp = this.organizationtest[first]

      if (first < end) {
        for (var i = first + 1; i <= end; i++) {
          this.organizationtest.splice(i - 1, 1, this.organizationtest[i])
        }
        this.organizationtest.splice(end, 1, tmp)
      }

      if (first > end) {
        for (var y = first; y > end; y--) {
          this.organizationtest.splice(y, 1, this.organizationtest[y - 1])
        }
        this.organizationtest.splice(end, 1, tmp)
      }

      //重置排序值
      let index = 1
      this.organizationtest.forEach(e => {
        e.sort = index
        index++
      })
      //排序值重置后，向后台发送请求，更新数据库中数据的排序，这里就不写了
      //axios

    },

    selectFun(row) {
      this.MultilineId = row
    }
    ,

    testsuiteselectFun(row) {
      this.testsuiteMultilineId = row
    },

    addtestcase(row) {
      row.is_execute = false
      debugger
      this.organizationtest.push(row)

      for (let i = 0; i < this.organizationtest.length; i++) {
        if (!this.organizationtest[i].testcase_name) {
          this.organizationtest[i].testcase_name = this.organizationtest[i].name
        }
        if (this.organizationtest[i].name) {
          delete this.organizationtest[i].name
        }

      }
      this.organizationtest = JSON.parse(JSON.stringify(this.organizationtest))
    }
    ,

    cresuite(row) {
      this.creatsuite = true
      this.testsuite_id = row.id
      this.testsuite_name = row.name
      let data = {'testsuite': row.id}
      gettestsuite2testcase(data).then(res => {
        let data = res.data.data
        let list = []
        for (let i=0; i<data.length; i++) {
          debugger
          if (data[i].type==='EXT_METHOD') {
            let dict = {}
            dict = data[i]
            list.push(dict)
          }else {
            let dict2 = {}
            dict2 = data[i]
            dict2.testcase_id = data[i].testcase.id
            // delete dict2.testcase
            list.push(dict2)
          }
        }
        this.organizationtest = list
        console.log(this.organizationtest)
      })

      modulelist().then(res => {
        this.moduleslist = res.data.data
      })
      // 从已有场景添加
      suiteprojectscreen({project: row.project.id}).then(res => {
        this.organizationlist = res.data.data
        // console.log(this.organizationlist)
      })

    }
    ,
    ext_method_change(index, method){
      this.organizationtest[index].ext_method = method
    },

    testcase_name_change(index, ext_method_name) {
      this.organizationtest[index].ext_method_name = ext_method_name
    },

    cretestsuite() {
      let datas = {
        'name': this.crtestsuite.name,
        'project': this.crtestsuite.project,
        'desc': this.crtestsuite.desc,
      }
      crtestsuite(datas).then(res => {
        this.cretesttuite = false
        this.$Message.success('创建场景成功！')
        this.gettestsuite()
      })
    }
    ,

    upsuite(pw) {
      this.updatetesttuite = true
      this.crtestsuite2.name = pw.name
      this.crtestsuite2.project = pw.project.id
      this.crtestsuite2.desc = pw.desc
    }
    ,

    partials(row) {
      const datas = {
        'level': row.level
      }
      partial(row.id, datas).then(res => {
        this.$Message.success('已更新用例权重值!')
      })
    },

    testsuitepartials(row) {
      const datas = {
        'level': row.level
      }
      testsuite_partial(row.id, datas).then(res => {
        this.$Message.success('已更新场景权重值!')
      })
    },

    updatatest() {
      let datas = {
        "name": this.testcasesModal.name,
        "api": this.testcasesModal.interface,
        "url": this.testcasesModal.url,
        "request_data_type": this.method2,
        "desc": this.testcasesModal.desc,
        "tester": "测试人员",
        "headers": JSON.stringify(this.headersmodle2),
        "request_data": JSON.stringify(this.bodymodle2),
        "expect_result": JSON.stringify(this.exmodle2),
      }
      uptest(this.testcaseID, datas).then(res => {
        this.debug = false
        this.getlist()
        this.$Message.success('更新成功')
      })
    }
    ,

    debugtest() {
      this.testcaseset = "exp"
      let datas = {
        'env_id': this.testcasesModal.envs,
        'testcase': {
          'name': this.testcasesModal.name,
          'api': this.testcasesModal.interface,
          'url': this.testcasesModal.url,
          'headers': this.headersmodle2,
          'request_data_type': this.method2,
          'request_params': '',
          'request_data': this.bodymodle2,
          'expect_result': this.exmodle2,
          'decs': this.testcasesModal.desc
        }
      }
      testdebug(datas).then(res => {
        this.resultsModal.execute = res.data.data.execute_time
        this.resultsModal.elapsed = res.data.data.elapsed_ms
        this.resultsModal.actual = res.data.data.actual_status_code
        this.resultsModal.status = res.data.data.status
        this.response_value = JSON.parse(res.data.data.actual_response_data)
        this.extract_value = res.data.data.extract_value
      })
    }
    ,
    envsList() {
      envlist().then(res => {
        this.envslist = res.data.data
      })
    }
    ,

    enable(pw) {
      this.debug = true
      this.testcaseID = pw.id
      this.testcasesModal.envs = this.envslist[0].id
      this.testcasesModal.name = pw.name
      this.testcasesModal.url = pw.url
      this.testcasesModal.desc = pw.desc
      this.testcasesModal.interface = pw.api.id
      this.headersmodle2 = JSON.parse(pw.headers)
      this.method2 = pw.request_data_type
      this.bodymodle2 = JSON.parse(pw.request_data)
      this.exmodle2 = JSON.parse(pw.expect_result)
    }
    ,

    getlist() {
      let data = {
        'size': this.testcasepage.size,
        'page': this.testcasepage.index
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.testcasepage.total = res.count
        this.testcasedata = data
      })
    }
    ,

    gettestsuite() {
      testsuitelist().then(res => {
        this.scenariodata = res.data.data
        this.Belongstesuite = res.data.data
      })
    }
    ,

    testcasepageSize(e) {
      let data = {
        'size': this.testcasepage.size,
        'page': e
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.testcasepage.total = res.count

      })
    },

    // 用例源翻页
    testcasesourcepageSize(e) {
      let data = {
        'size': this.testcasesourcepage.size,
        'page': e
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.testcasedata = data
        this.testcasesourcepage.total = res.count

      })
    },
    testcasesourcepagePage(e) {
      let data = {
        'size': e,
        'page': this.testcasesourcepage.index
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.testcasedata = data
        this.testcasesourcepage.total = res.count
      })
    },

    testcasepagePage(e) {
      let data = {
        'size': e,
        'page': this.testcasepage.index
      }
      testcaselist(data).then(res => {
        let data = res.data.data
        this.data = data
        this.testcasepage.total = res.count
      })
    }
    ,

    getprolist() {
      projectlist().then(res => {
        this.prolist = res.data.data
        this.projectnames = res.data.data
      })
    }
    ,

    intlist() {
      apilist().then(res => {
        this.interlist = res.data.data
        this.interlist2 = res.data.data
        this.Belongsapi = res.data.data
      })
    }
    ,

    createst(name) {
      let datas = {
        "name": this.InsterModal.name,
        "api": this.InsterModal.interface,
        "url": this.InsterModal.url,
        "request_data_type": this.method,
        "desc": this.InsterModal.desc,
        "tester": "测试人员",
        "headers": JSON.stringify(this.headersmodle),
        "request_data": JSON.stringify(this.bodymodle),
        "expect_result": JSON.stringify(this.exmodle),
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          createstcase(datas).then(res => {
            this.cremodel = false
            this.$Message.success('创建用例成功！')
            this.$refs[name].resetFields();
            this.getlist();
          })
        }
      })
    }
    ,

    Batch() {
      let list = []
      let row = this.MultilineId

      for (var i = 0; i < row.length; i++) {
        list.push(row[i].id)
      }
      let data = {
        'testcases': list
      }
      testcase_Batch(data).then(res => {
        this.$Message.success(res.data)
      })
    },

    testsuiteBatch() {
      let list = []
      let data = this.testsuiteMultilineId
      for (var i = 0; i < data.length; i++) {
        if (data[i].testcases.length = 0) {
          this.$Message.error('请先添加组织用例！')
        } else {
          list.push(data[i].id)
        }
      }
      if (list.length > 0) {
        testsuite_Batch(list).then(res => {
          this.$Message.success(res.msg)
        })

      }
    },


    // 查询项目下接口
    reproject(id, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          this.InsterModal.url = list[i].url
          this.headersmodle = JSON.parse(list[i].headers)
          this.method = list[i].request_data_type
          this.bodymodle = JSON.parse(list[i].request_data)
          this.InsterModal.desc = list[i].desc
          this.exmodle = list[i].expect_result

        }
      }
      console.log(id)
      console.log(list)
    },
  }
}
</script>

<style lang="less">
.box {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.jsoneditor-vue {
  height: 100%;
}

.inputSuccess :nth-last-child(1) {
  color: #19be6b !important;
}

.inputFail :nth-last-child(1) {
  color: red !important;
  width: 100px;
}

.testcase {
  padding: 16px 32px 0 32px;
  background: #fff;

  p {
    margin-bottom: 16px;
  }

  & > p:first-child {
    color: #17233d;
    font-weight: 500;
    font-size: 20px;
  }

  & > p:last-child {
    font-size: 14px;
  }
}
</style>
